<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>the global object</title>
        <!-- type 用于指定 MIME 类型 -->
        <style type="text/css">
            /* class selector */
            .wrapper { border:1px solid blue ; border-radius: 5px ; }
            .content { margin: 10px ; border: 1px solid gray ; padding: 10px ; }
        </style>
    </head>
    <body>

        <h3>探索浏览器端的Global对象</h3>

        <div class="wrapper"></div>

        <script type="text/javascript">

            function show(node){
                // 获得匹配于指定选择器的首个元素
                let w = document.querySelector( '.wrapper' );
                // 创建指定标签名对应的元素
                let e = document.createElement( 'div' ); 
                // 为 e 元素添加一个名称是 content 的 class name
                e.classList.add( 'content' );
                // 将 node 的字符串形式设置到 e 元素中
                e.innerHTML = node ; 
                // 将 e 元素作为子元素添加到 w 内部末尾
                w.appendChild( e ); 
            }

            // "the global object" 在 浏览器 环境中可以通过 window 变量来获取
            console.log( window );
            show( window );

            // 标准内置对象(standard built-in objects)统统都定义在 "the global object" 上
            console.log( window.Object );
            show( window.Object );

            console.log( window.Function );
            show( window.Function );

            console.log( window.Boolean );
            console.log( window.Number );
            console.log( window.String );
            console.log( window.BigInt );
            console.log( window.Symbol );

            console.log( window.Math );
            show( window.Math );
            console.log( window.JSON );
        </script>
        
    </body>
</html>